<template>
  <main class="rank" v-if="rankData">
    <span class="title">成绩排行榜</span>
    <el-scrollbar>
      <section v-for="item in rankData.personalRank" :key="item.studentId">
        <div class="box">
          <article>{{ item.rank }}</article>
          <main>
            <p>{{ item.stuName }}</p>
            <span>{{ item.studentId }}</span>
          </main>
        </div>
        <div class="score">{{ item.score ? item.score : '0' }}</div>
      </section>
    </el-scrollbar>
  </main>
</template>

<script setup lang="ts">
import { ref, watch } from 'vue';
import { IExamScoreChart } from '../../../../../type/index';

interface IProps {
  data: IExamScoreChart;
}

const props = defineProps<IProps>();
const rankData = ref<IExamScoreChart>(props.data);

watch(props, newValue => {
  rankData.value = newValue.data;
});
</script>

<style lang="scss" scoped>
.rank {
  padding: 16px 8px;
  // border: 2px solid red;

  .title {
    margin: 0 0 8px 8px;
    font-size: 16px;
  }

  .el-scrollbar {
    width: 100%;
    section {
      height: 60px;
      padding: 8px;
      display: flex;
      justify-content: space-between;
      border-radius: 16px;
      margin-bottom: 8px;

      .box {
        display: flex;
        article {
          display: flex;
          align-items: center;
          font-size: 32px;
          font-weight: 400;
          color: var(--font-color);
        }
        main {
          margin-left: 16px;
          color: var(--font-color);
          p {
            font-size: 18px;
          }
          span {
            font-size: 12px;
          }
        }
      }

      .score {
        font-size: 28px;
        color: var(--font-color);
      }
    }
  }
}
</style>
